<template>
    <div class="contain-box">
        <div class="title-box">
            <p class="content">
                <span style="font-size: 13px;">答题卡</span>
                <span class="tag icon1" :class="currentTap==0?'active':''" @click="changeTab(0)">
                    已答
                </span>
                <span class="tag icon2" :class="currentTap==1?'active':''" @click="changeTab(1)">
                    未答
                </span>
            </p>
        </div>
        <div class="list-div">
            <div v-for="(item,index) in questionList" :key="index" class="list-box">
                <div class="title">
                    <span>{{ item.type }}</span>
                </div>
                <span v-for="(question,index) in item.quest" :key="question.id"
                      :style="currentTap==0?(question.answerStatus!=true?'display:none':''):(question.answerStatus?'background-color:blue;color:#fff':'')"
                      @click="selectSingle(question,question.ques_type,index)"
                      :class="question.class">
              {{ index + 1 }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '@/plugins/eventBus';

export default {
    name: 'questionListFree',
    props: ['questionList', 'locationObj'],
    data() {
        return {
            currentTap: 1,//当前的状态
            singleTap: null,
            multiTap: null,
            singleType: '单选题',
            questionData: [],//题目
        }
    },
    mounted() {
        console.log(this.questionList);
        // 触发tab页切换事件
        bus.$emit('changeTab', this.currentTap)//题型，当前在第几条数据
        // 监听选择题目改变事件
        bus.$on('changeQuestion', (type, id, quesType) => {//是上一题还是下一题，当前在第几条数据的id值，题型
            let currentIndex = quesType == 1 ? 0 : 1;//题型数据的索引
            this.questionList[currentIndex].quest.forEach((item) => {
                if (id == item.id) {
                    item.class = 'active'
                } else {
                    item.class = ''
                }
            })
            this.$forceUpdate()
        })
    }
    ,
    methods: {
        //切换未答和已答
        changeTab(index) {
            this.currentTap = index;
            this.questionList.forEach(item => {
                item.quest.forEach((v) => {
                    v.class = '';
                })
            })
            bus.$emit('changeTab', index)//题型，当前在第几条数据

        },
        selectSingle(item, type,index) {
            let typeIndex = type == 1 ? 0 : 1;//单选题的索引是0，多选是1
            this.questionList[typeIndex].quest.forEach((v) => {
                if (item.id == v.id) {
                    v.class = 'active';
                } else {
                    v.class = '';
                }
            })
            //将其他题型的类名重置
            let resetIndex = typeIndex == 0 ? 1 : 0;
            this.questionList[resetIndex].quest.forEach((v) => {
                v.class = '';
            })
            console.log('当前点击的数据和索引',item,index);
            bus.$emit('selectQuest', item.ques_type, item.id,index)//题型，当前在第几条数据
            this.$forceUpdate()
        }
        ,
        submitFinish() {
            console.log(this.locationObj);
            this.$api.ajaxData({
                authorization: true,
                pathName: 'doSubmitTest',
                data: {
                    test_id: this.locationObj.test_id,
                    batch_id: this.locationObj.batch_id,
                    test_name: this.locationObj.test_name,
                },
                method: 'post'
            }).then(() => {
                this.$util.alert('提交成功！')
            })
        }
    }
}
</script>

<style scoped lang="scss">
.contain-box {
    display: flex;
    height: calc(100vh - 60px);
    //height: 100%;
    flex-flow: column;

    .title-box {
        height: 60px;
        border-bottom: 1px solid #f2f2f2;


        .content {
            padding-left: 20px;
            padding-top: 20px;
            padding-right: 20px;

            .tag {
                padding-left: 12px;
                padding-right: 5px;
                float: right;
            }

            .icon1, .icon2 {
                position: relative;
                margin-left: 10px;
                cursor: pointer;
            }

            .icon1.active::before, .icon2.active::before {
                background-color: #3477F5;

            }

            .icon1::before, .icon2::before {
                content: '';
                position: absolute;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                top: calc(50% - 4px);
                left: 0;
                background-color: #fff;
                border: 1px solid #D2D2D2;

            }


        }
    }

    .list-div {
        //align-self:auto;
        align-self: flex-start;
        height: calc(100vh - 170px);
        overflow-y: auto;
        width: 100%;

        .list-box {
            padding: 10px 20px;

            .title {
                height: 40px;
                padding-top: 10px;
                //padding-right: 15px;
            }


            & > span {
                align-items: center;
                height: 40px;
                width: 40px;
                justify-items: center;
                text-align: center;
                display: inline-block;
                border: 1px solid rgba(0, 0, 0, 0.349019607843137);
                border-radius: 50%;
                background-color: white;
                line-height: 40px;
                cursor: pointer;
                margin-right: 10px;
                margin-bottom: 10px;

            }

            span.active {
                background-color: #0079fe;
                color: #fff;
            }
        }
    }


    .commitBtnDiv {
        //align-self:center;
        height: 50px;
        background-color: #0079fe;
        width: 100%;
        text-align: center;
        padding-top: 12px;
        font-size: 20px;
    }
}
</style>
